<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01ECharts快速入门</title>
		<script src="../lib/echarts.min.js"></script>
    <script src="../theme/wonderland.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>
		<script>
      // 自定义主题步骤：
      // 1、在线编辑主题
      // 2、下载主题的js文件
      // 3、导入js文件
      // 4、在init方法中指明主题名称
      // init 有两个参数，第一个参数代表dom节点，第二个参数代表主题颜色 默认为 light 和 dark
			var mCharts = echarts.init(document.querySelector('div'),'wonderland')
			var xDataArry = ['小明', '小红', '小青', '小王']
			var yDataArry = [75, 82, 52, 78]
			var option = {
				title: {
					text: '成绩',
				},
				xAxis: {
					type: 'category',
					data: xDataArry,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '语文',
						type: 'bar',
						data: yDataArry,
						markPoint: {
							data: [
								{ type: 'max', name: '最大值' },
								{ type: 'min', name: '最小值' },
							],
						},
                        label:{
                            show:true,
                            rotate:50
                        },
                        barWidth:40
					},
				],
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
